;
(function () {
  const Waterfall = function (opt) {
    // 获取瀑布流容器元素
    this.el = document.getElementsByClassName(opt.el)[0];
    this.oItems = this.el.getElementsByClassName('wf-item')
    // 瀑布流列数
    this.column = opt.column;
    // 间隔
    this.gap = opt.gap;
    // 每栏图片宽度 （总宽度-总间隔宽度）/ 分栏数
    this.itemWidth = (this.el.offsetWidth - this.gap * (this.column - 1)) / this.column
    // 存放图片高度
    this.heightArr = []

    // console.log(this.itemWidth);
    this.init();
  }

  Waterfall.prototype.init = function () {
    this.render();
  }

  Waterfall.prototype.render = function () {

    var item = null
    for (let i = 0; i < this.oItems.length; i++) {
      // 取得没一个图片盒子
      item = this.oItems[i]
      // 设置图片宽度 高度会自适应
      item.style.width = this.itemWidth + 'px'

      if (i < this.column) {
        // 第一行图片
        item.style.top = '0px'
        item.style.left = i * (this.itemWidth + this.gap) + 'px'
        this.heightArr.push(item.offsetHeight)
      } else {
        let minIdx = getMinIndex(this.heightArr)
        console.log(minIdx);
        // 同一列图片的left值是相同的
        item.style.left = this.oItems[minIdx].offsetLeft + 'px'
        item.style.top = this.heightArr[minIdx] + this.gap + 'px'
        // 更新heightArr
        this.heightArr[minIdx]   += item.offsetHeight + this.gap          
      }

    }

    function getMinIndex(arr) {
      return arr.indexOf(Math.min.apply(null, arr))
    }

  }

  window.Waterfall = Waterfall
})()